import React, { Component } from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux';

import {
  Modal,
  Row,
  Select,
} from 'antd';
import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import '@ant-design/compatible/assets/index.css';

const { Option } = Select;

interface FormProps extends FormComponentProps {
  dispatch?: Dispatch;
  cancelVisbile: boolean;
  orderId: number;
  cancelList?: any[];
  search: any;
  changeCancelModal: (cancelVisbile: boolean) => void;
}

@connect(({
  tookManagementList: { cancelList },
  loading,
}: any) => ({
  cancelList,
}))

class CancelOrderInfo extends Component<FormProps> {
  handleComfirmCancel = () => {
    const {
      form,
      orderId,
      search,
      changeCancelModal,
    } = this.props;

    form.validateFields((errors: any, values: any) => {
      if (!errors) {
        const params = {
          orderId,
          ...values,
          search,
        };

        const { dispatch } : any = this.props;
        dispatch({
          type: 'tookManagementList/cancelOrder',
          payload: params,
        });
      }
      changeCancelModal(false);
    });
  }

  render() {
    const {
      cancelVisbile,
      cancelList = [],
      changeCancelModal,
      form: { getFieldDecorator },
    } = this.props;

    return (
      <Modal
        title="取消订单"
        destroyOnClose
        visible={cancelVisbile}
        onOk={this.handleComfirmCancel}
        onCancel={() => changeCancelModal(false)}
      >
        <Form className="tableListForm" hideRequiredMark colon={false}>
          <Row gutter={12}>
            <Form.Item label="取消原因" style={{ width: '100%' }} className="marginB0Import">
              {getFieldDecorator('reasonId', {
                rules: [{ required: true, message: '请选择取消原因' }],
              })(
                <Select placeholder="请选择">
                  {cancelList.map((item: any) => (
                    <Option value={item.id} key={item.id}>{item.reason}</Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create<FormProps>()(CancelOrderInfo);
